<template>
  <div class="demandForm">
    <!-- 提交支付资料 -->
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-position="left"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="任务标题" size="small" prop="sv_title">
        <el-input size="medium" v-model="form.sv_title" placeholder="请输入任务标题"></el-input>
      </el-form-item>
      <el-form-item label="路径" size="small">
        <el-input size="medium" v-model="form.sv_path" placeholder="请输入路径"></el-input>
      </el-form-item>
      <el-form-item label="店铺ID" size="small" prop="user_id">
        <el-input size="medium" v-model="form.user_id" placeholder="请输入店铺ID"></el-input>
      </el-form-item>
      <el-form-item label="负责人" size="small" prop="sv_master_id">
        <el-select size="medium" v-model="form.sv_master_id" placeholder="请选择负责人">
          <el-option
            v-for="(item, index) in principalArr"
            :key="index"
            :label="item.sv_d_user_name"
            :value="item.sv_d_user_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="filtrate" label="优先级" size="small" prop="sv_priority">
        <el-radio-group v-model="form.sv_priority">
          <el-radio-button
            v-for="(item, index) in priorityArr"
            :key="index"
            :label="item.id"
            :class="'priority'+ index"
          >{{item.name}}</el-radio-button>
        </el-radio-group>
        <!-- <el-select size="medium" v-model="form.sv_priority" placeholder="请选择优先级">
          <el-option
            v-for="(item, index) in priorityArr"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>-->
      </el-form-item>
      <el-form-item class="filtrate" label="任务类型" size="small" prop="sv_type">
        <el-radio-group v-model="form.sv_type">
          <el-radio-button
            v-for="(item, index) in taskTypeArr"
            :key="index"
            :label="item.id"
          >{{item.name}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="客户端" size="small" prop="sv_client_type">
        <el-select size="medium" v-model="form.sv_client_type" placeholder="请选择客户端">
          <el-option
            v-for="(item, index) in clientArr"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="行业类型" size="small" prop="sv_industry_type_id">
        <el-select size="medium" v-model="form.sv_industry_type_id" placeholder="请选择行业类型">
          <el-option
            v-for="(item, index) in industryTypeArr"
            :key="index"
            :label="item.sv_uit_name"
            :value="item.industrytype_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="截止时间" size="small" prop="sv_end_time">
        <el-date-picker
          v-model="form.sv_end_time"
          :picker-options="pickerOptions"
          type="datetime"
          format="yyyy-MM-dd HH:mm"
          placeholder="请选择截止时间"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="备注" size="small" prop="sv_description">
        <quill-editor
          ref="text"
          v-model="form.sv_description"
          class="myQuillEditor"
          :options="editorOption"
        />
      </el-form-item>
      <el-form-item class="filtrate" v-if="!isShow" label="当前进度" size="small">
        <el-radio-group v-model="form.sv_status">
          <el-radio-button
            v-for="(item, index) in statusArr"
            :key="index"
            :class="'progress'+ index"
            :label="item.id"
          >{{item.name}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="!isShow" label="提交人" size="small">
        <span>{{!submitter ? userName : submitter}}</span>
        <span>{{form.sv_creation_date}}</span>
      </el-form-item>
      <el-form-item size="large">
        <el-button
          style="margin-left: 15%;padding: 8px 30px"
          type="primary"
          @click="onSubmit('form')"
        >完成</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
import { mapState } from "vuex"; //注册state
// 富文本
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入店铺id"));
      } else if (value.length != 8) {
        callback(new Error("请输入正确的店铺id"));
      } else if (value.length != 8) {
      }
    };
    return {
      // 数据
      form: {
        sv_title: "",
        sv_path: "",
        user_id: "",
        sv_master_id: "",
        sv_priority: "",
        sv_type: "",
        sv_client_type: "",
        sv_industry_type_id: "",
        sv_end_time: "",
        sv_description: "",
        sv_status: 1,
        sv_created_by: "",
        sv_creation_date: "",
        sv_id: "" // 工单标识id
      },
      submitter: "",
      rules: {
        sv_title: [
          { required: true, message: "请输入任务标题" },
          { max: 30, message: "请输入不多于30个字的标题", trigger: "blur" }
        ],
        user_id: [
          {
            required: true,
            pattern: /^\d{8}$/,
            message: "请输入正确的店铺id",
            trigger: "blur"
          }
        ],
        sv_master_id: [{ required: true, message: "请输入负责人" }],
        sv_priority: [{ required: true, message: "请输入优先级" }],
        sv_type: [{ required: true, message: "请输入任务类型" }],
        sv_client_type: [{ required: true, message: "请输入客户端" }],
        sv_industry_type_id: [{ required: true, message: "请输入行业类型" }]
      },
      principalArr: [],
      priorityArr: [
        { id: 1, name: "普通" },
        { id: 2, name: "次要" },
        { id: 3, name: "主要" },
        { id: 4, name: "严重" }
      ],
      taskTypeArr: [
        { id: 1, name: "BUG" },
        { id: 2, name: "优化" },
        { id: 3, name: "新需求" },
        { id: 4, name: "用户场景" }
      ],
      clientArr: [
        { id: 1, name: "PC端-网页" },
        { id: 2, name: "PC端-绿色客户端" },
        { id: 3, name: "PC端-蓝色客户端" },
        { id: 4, name: "安卓-手持&大屏" },
        { id: 5, name: "IOS&Ipad" },
        { id: 6, name: "小程序" },
        { id: 7, name: "微商城" },
        { id: 8, name: "代理商平台" },
        { id: 9, name: "官网" },
        { id: 10, name: "德客学院" }
      ],
      industryTypeArr: [],
      statusArr: [
        { id: 1, name: "已反馈" },
        { id: 2, name: "待排期" },
        { id: 3, name: "开发中" },
        { id: 4, name: "测试中" },
        { id: 5, name: "已上线" },
        { id: 6, name: "暂缓" },
        { id: -1, name: "拒绝" }
      ],
      pickerOptions: {
        disabledDate: time => {
          return this.dealDisabledDate(time);
        }
      },
      editorOption: {},
      // 区分是新增还是详情
      isShow: false,
      // 身份令牌
      myToken: ""
    };
  },
  computed: {
    // 引入权限页面
    ...mapState(["userId"]),
    ...mapState(["userName"])
  },
  components: {
    quillEditor
  },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      // 格式化时间
      this.timeFormatting = this.utils.timeFormatting();
      // 判断是新增还是查看
      this.form.sv_id = this.$route.query.id;
      // 获取员工信息
      this.$api.getManagerData(this.myToken).then(res => {
        this.principalArr = res.dataList;
      });
      if (this.form.sv_id) {
        // 查看
        this.isShow = false;
        this.getOrderDetail();
      } else {
        // 新增
        this.isShow = true;
      }
      // 获取行业数据
      this.$api.getIndustryData(this.myToken).then(res => {
        this.industryTypeArr = res;
      });
    },
    // 获取订单详情
    getOrderDetail() {
      this.$api.getDemandDetail(this.form.sv_id, this.myToken).then(res => {
        const { succeed, errmsg, values } = res;
        if (succeed) {
          // 格式化创建时间
          values.sv_creation_date = new Date(values.sv_creation_date).Format(
            "yyyy-MM-dd hh:mm"
          );
          // 提交人
          this.principalArr.forEach(ele => {
            if (!this.submitter) {
              if (ele.sv_d_user_id == values.sv_created_by) {
                this.submitter = ele.sv_d_user_name;
              }
            }
          });
          this.form = values;
        } else {
          this.$message.error(errmsg);
        }
      });
    },
    // 禁止选择当前时间之前的日期作为截止时间
    dealDisabledDate(time) {
      var times = Date.now();
      return time.getTime() < times;
    },
    // 提交表单
    onSubmit(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          // 提交数据
          this.$api.addDemand(this.form, this.myToken).then(res => {
            const { succeed, errmsg } = res;
            if (succeed) {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              this.$router.replace("/admin/demand");
            } else {
              this.$message.error(errmsg);
            }
          });
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.demandForm {
  .demandForm-type {
    margin-bottom: 20px;
  }
  // 地址级联的样式
  .adressOpation {
    width: 95px;
  }
  .detailAdress {
    margin-top: 10px;
  }
}
.demandForm @{deep} .demo-ruleForm {
  background-color: #fff;
  padding: 30px 30%;
  box-sizing: border-box;
}
// 修改输入框样式
.demandForm @{deep} .el-input {
  width: 500px;
}
// 表单样式
.demandForm @{deep} .el-form {
  padding: 30px 25%;
  box-sizing: border-box;
}
// 输入框的宽度
.demandForm @{deep} .el-input__inner {
  width: 500px;
}
.filtrate {
  margin: 20px 0;
  margin-top: 0;
  background-color: #fff;
  width: 700px;
  .el-radio-button {
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 100px;
    line-height: 25px;
  }
  .priority1 {
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: yellow;
        border: 1px solid yellow;
        color: #000;
      }
    }
  }
  .priority2 {
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: orange;
        border: 1px solid orange;
        color: #000;
      }
    }
  }
  .priority3 {
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: red;
        border: 1px solid red;
        color: #000;
      }
    }
  }
  .progress0 {
    &::before {
      content: ">";
      position: absolute;
      bottom: -5px;
      left: 61%;
      -webkit-transform: translateX(-50%) rotate(90deg);
      transform: translateX(-50%) rotate(90deg);
      height: 0px;
      font-size: 20px;
      font-weight: 600;
      color: #f00;
    }
    &::after {
      content: ">";
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      font-size: 20px;
      font-weight: 600;
      color: #f00;
    }
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: #cccccc;
        border: 1px solid #cccccc;
      }
    }
  }
  .progress1 {
    &::after {
      content: ">";
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      font-size: 20px;
      font-weight: 600;
      color: #f00;
    }
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: #ffcc66;
        border: 1px solid #ffcc66;
      }
    }
  }
  .progress2 {
    &::after {
      content: ">";
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      font-size: 20px;
      font-weight: 600;
      color: #f00;
    }
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: #99ff99;
        border: 1px solid #99ff99;
      }
    }
  }
  .progress3 {
    &::after {
      content: ">";
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      font-size: 20px;
      font-weight: 600;
      color: #f00;
    }
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: #33ccff;
        border: 1px solid #33ccff;
      }
    }
  }
  .progress4 {
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: #009933;
        border: 1px solid #009933;
      }
    }
  }
  .progress5 {
    &::after {
      content: ">";
      position: absolute;
      right: 0px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      font-size: 20px;
      font-weight: 600;
      color: #f00;
    }
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: #996666;
        border: 1px solid #996666;
      }
    }
  }
  .progress6 {
    &.is-active {
      @{deep} .el-radio-button__inner {
        background-color: #ff0000;
        border: 1px solid #ff0000;
      }
    }
  }
}
// 按钮组的内容
.filtrate @{deep} .el-radio-button__inner {
  width: 100px;
  border: 1px solid #f1f1f1;
  background-color: #f1f1f1;
  color: #626366;
  font-size: 14px;
  line-height: 16px;
}
// 按钮组选中内容
.filtrate @{deep} .is-active .el-radio-button__inner {
  background-color: #439fff;
  border: 1px solid #439fff;
  box-shadow: unset;
  color: #fff;
  border-radius: 4px;
  line-height: 16px;
}
</style>